* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    //等宽字体
    font-family:monospace;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    // 是渐变!
    background: linear-gradient(45deg, #ff0057, #2196f3);
}

h2 {
    position: relative;
    display: flex;
    color: #ccc;
    gap: 5px;
    font-size: 4em;
    cursor: pointer;

    span {
        position: relative;
        // backdrop-filter
        filter: blur(5px); //把100个像素合成为1个
        padding: 0 5px;

        &:hover {
            filter: blur(0px);
            transition: 0.5s; //加hover里面页面加载的时候不会跳那一下
        
            i::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 2px;
                height: 8px;
                background-color: #ccc;
                //给其他4个边加阴影
                box-shadow: 
                0 52px #ccc,
                34px 0 #ccc,
                34px 52px #ccc,
            }
            i::after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 8px;
                height: 2px;
                background-color: #ccc;
                //给其他4个边加阴影
                box-shadow: 
                0 58px #ccc,
                28px 0 #ccc,
                28px 58px #ccc,
            }
        }
        i{
            position: absolute;
            inset: 0;
            background: transparent;
        }
    }
}